<template>
  <view class="content">
    <view class="Top">
      <view class="top-letfall">
        <view class="top-one">
          <view class="top-one1">
            <!-- <image :="imgUrl"></image> -->
            <image :src="Img" class="avatar-img" />
          </view>
          <view class="top-p1">{{ userinfo }}</view>
        </view>
        <view class="top-two">
          <van-icon
            name="setting-o"
            size="22"
            color="white"
            @click="goSetting"
          />
          <van-icon
            name="comment-o"
            size="22"
            color="white"
            style="margin-left: 18rpx"
          />
        </view>
      </view>
      <view class="top-rightall">
        <view class="tra1">
          <view class="corn">22</view>
          <view class="fishcorn" @click="ddd">鱼币</view>
        </view>
        <view class="tra2">
          <view class="corn1">3</view>
          <view class="fishcorn1">帖子</view>
        </view>
        <view class="tra3">
          <view class="corn2">44</view>
          <view class="fishcorn2">关注</view>
        </view>
        <view class="tra4">
          <view class="corn3">0</view>
          <view class="fishcorn3">粉丝</view>
        </view>
      </view>
    </view>
    <view class="middle">
      <van-cell
        title="我的订单"
        is-link
        value="查看全部订单"
        @click="orderjump"
      />
      <van-divider />
    </view>
    <view class="four">
      <view class="tra1" @click="t1">
        <van-icon name="pending-payment" size="22" />
        <view class="fishcorn">待付款</view>
      </view>
      <view class="tra2" @click="t2">
        <van-icon name="send-gift-o" size="22" />
        <view class="fishcorn1">待发货</view>
      </view>
      <view class="tra3" @click="t3">
        <van-icon name="logistics" size="22" />
        <view class="fishcorn2">待收货</view>
      </view>
      <view class="tra4" @click="t4">
        <van-icon name="sign" size="22" />
        <view class="fishcorn3">已完成</view>
      </view>
    </view>
    <view class="meiyong"></view>
    <view class="mine-middle">
      <van-cell title="我的收藏" is-link />
      <van-divider />
      <van-cell title="我的钓点" is-link />
      <van-divider />
      <van-cell title="我的渔具店" is-link />
      <van-divider />
      <van-cell title="通讯录" is-link @click="jumpContacts" />
      <van-divider />
    </view>
    <view class="meiyong"></view>
    <view class="fotter">
      <van-cell title="客服电话" value="010-12341234" />
      <hr style="border: 1rpx solid #f0f0f2" />
      <van-cell title="关于我们" is-link />
      <van-divider />
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      title: "Hello",
    };
  },
  onLoad() {},
  methods: {
    gotozhon() {
      uni.navigateTo({
        url: "/pages/crowdfunding/Index",
      });
    },
  },
};
</script>
<script setup>
import { onMounted, ref } from "vue";
import Img from "../../../static/img/tabbar-5/joker.jpg";
const userinfo = ref("Nova");
const dizhi = ref("");
const ddd = () => {
  uni.getLocation({
    type: "wgs84",
    geocode: true, //必写项
    success: (data) => {
      if (data.address) {
        this.city = data.address.city;
        console.log(this.city);
        var city = this.city;
        uni.request({
          url: "http://wthrcdn.etouch.cn/weather_mini?city=" + city,
          data: {},
          success: (res) => {
            console.log(res.data + "=============");
          },
        });
      }
    },
  });
};
onMounted(() => {
  uni.getLocation({
    type: "gcj02",
    geocode: true,
    success: function (res) {
      console.log("当前位置的经度：" + res.longitude);
      console.log("当前位置的纬度：" + res.latitude);
    },
    fail: (err) => {
      console.log(err, "接口调用失败");
    },
  });
});
const goSetting = () => {
  uni.redirectTo({
    url: "/pages/mean-detail/mean-setting/setting",
  });
};
const orderjump = () => {
  uni.redirectTo({
    url: "/pages/mean-detail/mean-dd/mean-order",
  });
};
// 待付款
const t1 = () => {
  uni.redirectTo({
    url: "/pages/mean-detail/mean-dd/mean-order?arb=1",
  });
};

// 通讯录
const jumpContacts = () => {
  uni.navigateTo({
    url: "/pages/contacts",
  });
};
// 待发货
const t2 = () => {
  uni.redirectTo({
    url: "/pages/mean-detail/mean-dd/mean-order?arb=2",
  });
};
// 待收货
const t3 = () => {
  uni.redirectTo({
    url: "/pages/mean-detail/mean-dd/mean-order?arb=3",
  });
};
// 已完成
const t4 = () => {
  uni.redirectTo({
    url: "/pages/mean-detail/mean-dd/mean-order?arb=4",
  });
};
</script>

<style lang="less">
.content {
  background-color: #f0f0f2;
  height: 100vh;
}

.Top {
  background-color: #2f77fa;
  height: 350rpx;
  overflow: hidden;

  .top-letfall {
    padding: 20rpx 17rpx;
    display: flex;
    margin-top: 15rpx;
    justify-content: space-between;

    .top-one {
      display: flex;
      margin-top: 15rpx;
      margin-left: 15rpx;
      height: 150rpx;
      line-height: 150rpx;

      .top-one1 {
        .avatar-img {
          width: 130rpx;
          height: 130rpx;
          border-radius: 50%;
        }
      }

      .top-p1 {
        margin-left: 30rpx;
        color: white;
      }
    }
  }

  .top-rightall {
    display: flex;
    justify-content: space-around;
    margin-top: 45rpx;

    .tra1,
    .tra2,
    .tra3,
    .tra4 {
      text-align: center;
      background-color: #3180f9;
      padding: 0 15rpx;
      color: white;
      width: 20%;
      height: 86rpx;
      font-size: 26rpx;

      .corn,
      .corn1,
      .corn2,
      .corn3 {
        margin-top: 8rpx;
      }
    }
  }
}

.four {
  height: 120rpx;
  display: flex;
  justify-content: space-around;
  background-color: white;

  .tra1,
  .tra2,
  .tra3,
  .tra4 {
    text-align: center;
    padding: 0 15rpx;
    width: 20%;
    height: 86rpx;
    font-size: 26rpx;
    margin-top: 20rpx;

    .corn,
    .corn1,
    .corn2,
    .corn3 {
      margin-top: 8rpx;
    }
  }
}

.meiyong {
  height: 20rpx;
  background-color: #f0f0f2;
}
</style>